import React, { FC } from "react";
import DeviceAccessCard from "@/components/DeviceAccessCard";
import useGetDeviceAccessData from "@/hooks/useGetDeviceAccessData";
import { Spin } from "antd";
import type { ChartPropsType } from "@/types/echartInterface";
const DeviceAccessView: FC<ChartPropsType> = (props: ChartPropsType) => {
  
  const { deviceAccessList, loading } = useGetDeviceAccessData(
    props.times
  );

  const { nowDeviceNum=0, endDeviceNum=0, updateDeviceNum=0 } =
    deviceAccessList || {};

  return (
    <>
      {loading && (
        <div style={{ textAlign: "center" }}>
          <Spin />
        </div>
      )}
      {!loading && (
        <>
          <DeviceAccessCard
            value={nowDeviceNum}
            color="#33B0FF"
            imgUrl={require("@/asset/images/icon1.png")}
            keys="当前边设备接入数"
          />
          <DeviceAccessCard
            value={endDeviceNum}
            color="#1C97AB"
            imgUrl={require("@/asset/images/icon2.png")}
            keys="端设备接入数"
          />
          <DeviceAccessCard
            value={updateDeviceNum}
            color="#3DBCD6"
            imgUrl={require("@/asset/images/icon3.png")}
            keys="累计升级次数"
          />
        </>
      )}
    </>
  );
};

export default DeviceAccessView;
